<template>
  <div class="box-one">
    <div class="sele-value">
        <div class="jkone-title">请选择驾照类型：</div>
        <el-select v-model="value" placeholder="请选择" @change="tojiakao">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                    </el-option>
          </el-select>
    </div>
    <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="题号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="question"
            label="问题"
            >
          </el-table-column>
          <el-table-column
            prop="answer"
            label="答案"
            width="100">
          </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
export default {
        data() {
      return {
        tableData: [],
        options: [{
          value: 'c1',
          label: 'c1驾考题目'
        }, {
          value: 'c2',
          label: 'c2驾考题目'
        }, {
          value: 'a1',
          label: 'a1驾考题目'
        }, {
          value: 'a2',
          label: 'a2驾考题目'
        }, {
          value: 'b1',
          label: 'b1驾考题目'
        }, {
          value: 'b2',
          label: 'b2驾考题目'
        }],
        value: 'c1'
      }
    },
    mounted(){
        this.getList({
                    subject : 1,
                    model: this.value,
                    key: '0996dfbca45f9a02d5209ee9ff19f7b2',
                    testType: 'rand'
            })
    },
    methods: {
        getList(data){
            this.$axios.post('/api','/jztk/query',data).then(res=>{
                this.tableData = res.result
            })
        },
        tojiakao(){
            let model =this.value;
            this.getList({
                    subject : 4,
                    model: model,
                    key: '0996dfbca45f9a02d5209ee9ff19f7b2',
                    testType: 'rand'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.box-one{
    background-color: #fff;
    padding: 20px;
}
.sele-value{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;
    }
.sele-value .jkone-title{
        margin-right: 10px;
    }
</style>